<!---->
<template>
  <div>
    <!--根据输入框模拟查询-->
    <div><el-input v-model="input" placeholder="请输入内容"  @blur="selectLike"></el-input></div>
    <el-button @click="deleteAll" >批量删除</el-button>

	<div id="addbigclass">
		<el-popover
		  placement="right"
		  width="400"
		  trigger="click">
			<el-form ref="form" :model="form" label-width="80px">
			  <el-form-item label="分类名称">
				<el-input v-model="form.bigclassName"></el-input>
			  </el-form-item>
			  <el-form-item label="备注">
				<el-input type="textarea" v-model="form.bigclassRemark"></el-input>
			  </el-form-item>

			  <el-form-item>
				<el-button type="primary" @click="onSubmit">添加</el-button>
			  </el-form-item>
			</el-form>
		  <el-button slot="reference">新增数据</el-button>
		</el-popover>
	</div>



	 <!--表格-->
    <div id="table">
      <el-table
        @selection-change="selectAll"
        :data="tableData"
        border
        style="width: 70%">
        <el-table-column
          type="selection"
          fixed
          width="100px">
        </el-table-column>
        <el-table-column
          fixed
          prop="bigclassId"
          label="序号"
          width="200px">
        </el-table-column>
        <el-table-column
          prop="bigclassName"
          label="大类名称"
          width="200px">
        </el-table-column>
        <el-table-column
          prop="bigclassRemark"
          label="备注"
          width="200px">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200px">


          <template slot-scope="scope">
		  <div id="addbigclass1">
		<el-popover
		  placement="right"
		  width="400"
		  trigger="click">
			<el-form ref="form" :model="form1" label-width="80px">
			  <el-form-item label="分类名称">
				<el-input v-model="form1.bigclassName" :value=form1.bigclassName></el-input>
			  </el-form-item>
			  <el-form-item label="备注">
				<el-input type="textarea" v-model="form1.bigclassRemark" :value=form1.bigclassRemark></el-input>
			  </el-form-item>
			  <el-form-item>
				<el-button type="primary" @click="onSubmit1(scope)">提交</el-button>
			  </el-form-item>
			</el-form>
		  <el-button slot="reference" @click="look(scope)">修改</el-button>
		</el-popover>
	</div>

          </template>
        </el-table-column>
      </el-table>
    </div>


    <div id="fenye">
      <el-pagination
        @current-change	="pageNumberchange"
        :page-size="5"
      background
      layout="prev, pager, next"
      :total="page.total">
    </el-pagination></div>
  </div>

</template>

<script>
  import axios from 'axios'

  let _this;

  export default {
    name: "index",
    data(){
      return{
	  form1: {
		  bigclassId:'',
          bigclassName: '',
          bigclassRemark: '',
        },
		//多选框
		checks:[],
	  /*下拉框数据*/
        input:"",
		//表格数据
        tableData: [],
        /*分页数据*/
        page:{
          pageNumber:1,
          pageSize:5,
          total:'',
          pages:'',
        },
		//弹出框
		form:{
          bigclassName:"",
		  bigclassRemark:"",
        },

      }
    },
    /*钩子函数*/
    mounted(){
      _this=this;
      _this.getbigClass();
    },
    /*方法区*/
    methods:{
	  //多选框
      selectAll:function (s) {
	  _this.checks.length=0;
		for(let i=0;i<s.length;i++){
			_this.checks.push(s[i].bigclassId);
		}
        console.log(_this.checks);
      },
      //分页下面的页码
      pageNumberchange(index) {
        _this.page.pageNumber=index;
		_this.getbigClass();
        console.log(index);

      },
      	//根据输入框模糊查询
      selectLike(){
        axios.post("http://192.168.40.37:8080/selectLike",{"input":_this.input}).then(function (result) {
			_this.tableData=result.data.data;
            console.log(result)
        })
      },
	  //查询所有数据的方法
	  getbigClass(){
		axios.post("http://192.168.40.37:8080/getbigClass",{"xx":_this.page}).then(function (result) {
			_this.tableData=result.data.data.list;
			_this.page.total=result.data.data.total;
			_this.page.pages=result.data.data.pages;
            console.log(result)
        })
	  },
	  //删除所有的数据
	  deleteAll(){
		axios.post("http://192.168.40.37:8080/deleteMore",{"checks":_this.checks}).then(function (result) {
			_this.getbigClass();
            console.log(result)
        })
	  },
	  //新增的方法
	  onSubmit() {
        //添加按钮
		axios.post("http://192.168.40.37:8080/uploadFile",{"form":_this.form}).then(function (result) {
			_this.getbigClass();
			alert("新增成功!");
            console.log(result)
        })
      },
	  //修改的方法
		onSubmit1(scope){
			_this.form1.bigclassId=scope.row.bigclassId;
		axios.post("http://192.168.40.37:8080/updatebigClass",{"form1":_this.form1}).then(function (result) {
			_this.getbigClass();
			alert("修改成功!");
            console.log(result)
        })
		},
		look(scope){
			_this.form1.bigclassName=scope.row.bigclassName;
			_this.form1.bigclassRemark=scope.row.bigclassRemark;
		},
	  }

  }
</script>

<style scoped>
  /*样式区*/
  .el-menu{
    width: 200px;
  }
</style>
